<template>
  <van-tab title="成员">
    <div class="tab-inner-wrap"
         ref="wrapper">
      <div class="tab-inner">

        <!-- 基本信息内容 S-->

        <!-- 基本信息内容 E -->
        <van-skeleton :row="2"
                      v-for="i in skeletonRepeat"
                      :key="i"
                      avatar
                      avatar-shape="square"
                      :loading="skeletonLoading">
          <template v-if="!!!$props.isProduct">
            <list-card v-for="(item, index) in data"
                       :key="index"
                       :title="item.personName">
              <template #left-icon>
                <div class="person-avatar">{{item.personName.substr(- 2)}}</div>
              </template>
              <template #content>
                <span>{{item.titleId}}</span>
                <span>{{item.bearTypeId}}</span>
                <span>{{item.sexId}}</span>
              </template>
            </list-card>
          </template>
          <template v-else>
            <list-card v-for="(item, index) in data"
                       :key="index"
                       :title="item.authorName">
              <template #left-icon>
                <div class="person-avatar">{{item.authorName.substr(- 2)}}</div>
              </template>
              <template #content>
                <span>{{item.authorName}}</span>
                <span>{{item.authorUnitId}}</span>
                <span>{{item.authorType}}</span>
              </template>
            </list-card>
          </template>
          <!-- 空状态 -->
          <van-empty description=""
                     v-if="data.length === 0">
            <template #image>
              <div class="empty-image">
                <img src="/images/detail/icon_empty.png" />
              </div>
            </template>
          </van-empty>
        </van-skeleton>

      </div>
    </div>
  </van-tab>
</template>

<script>
import { ref, inject, nextTick } from 'vue'
import ListCard from '@/components/ListCard.vue'
import usebScroll from '@/hooks/usebScroll'
import { getSkeletonInstance } from '@/hooks/useSkeleton'
import { getPerson } from '@/api/request/business'

export default {
  props: {
    isProduct: {
      type: Boolean,
      require: false,
      default: false
    }
  },
  components: {
    ListCard
  },
  setup (props) {
    const data = ref([])
    const wrapper = ref()
    const $scroll = usebScroll()
    const beanId = inject('beanId')
    const id = inject('id')
    const { skeletonLoading, skeletonRepeat, hideSkeleton, narrowSkeleton } = getSkeletonInstance({ skeletonRepeat: 10 })
    const refresh = (options) => {
      if (data.value.length === 0) {
        getPerson({
          beanId,
          id
        }, props.isProduct).then(response => {
          narrowSkeleton()
          data.value.push(...response.body.data.item)
          hideSkeleton()
          nextTick(() => {
            wrapper.value.style.height = `calc(100vh - ${options.offsetTop})`
            $scroll.initOrRefreshBScroll(wrapper.value)
          })
        })
      }
    }
    return {
      data,
      wrapper,
      refresh,
      skeletonLoading,
      skeletonRepeat

    }
  }
}
</script>

<style scoped>
.ep-card-content span {
  padding-right: 12px;
}
.person-avatar {
  width: 34px;
  border-radius: 2px;
  height: 34px;
  font-size: 12px;
  line-height: 34px;
  text-align: center;
  background: #4073f5;
  color: #fff;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: 10px;
}
</style>